
<div id="wrapMain">
	<div id="innerMain">
		<div class="row">
        
        
    <div class="pull-left head_text btn btn-danger btn-sm" ><i class="icon-home"></i></div>
        <div class="btn-group pull-right">


  <div class="btn-group">
    <button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown">
      NGÀY
      <i class="icon-caret-down"></i>
    </button>
    <ul class="dropdown-menu">
      <li><a href="date/desc">Mới <i class="icon-long-arrow-right"></i> </a></li>
      <li><a href="date/asc">Cũ <i class="icon-long-arrow-right"></i></a></li>
    </ul>
  </div>
  
  
    <div class="btn-group">
    <button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown">
      VIEW
      <i class="icon-caret-down"></i>
    </button>
    <ul class="dropdown-menu">
      <li><a href="views/desc">NHIỀU <i class="icon-long-arrow-right"></i> </a></li>
      <li><a href="views/asc">ÍT <i class="icon-long-arrow-right"></i></a></li>
    </ul>
  </div>
  
    <div class="btn-group">
    <button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown">
      LIKE
      <i class="icon-caret-down"></i>
    </button>
    <ul class="dropdown-menu">
       <li><a href="like/desc">NHIỀU <i class="icon-long-arrow-right"></i> </a></li>
      <li><a href="like/asc">ÍT <i class="icon-long-arrow-right"></i></a></li>
    </ul>
  </div>
  
    <div class="btn-group">
    <button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown">
      COMMENT
      <i class="icon-caret-down"></i>
    </button>
    <ul class="dropdown-menu">
       <li><a href="comments/desc">NHIỀU <i class="icon-long-arrow-right"></i> </a></li>
      <li><a href="comments/asc">ÍT <i class="icon-long-arrow-right"></i></a></li>
    </ul>
  </div>
</div>
     <div class="clearfix"></div>
     <div style="height:20px"></div>   
        

<?php
		//POST RENDER GRID VIEW DATA
		
		
		$page = (isset($_GET['page']) && $_GET['page'] != '') ? $_GET['page'] : 1;
		post_render_grid($data['info'], null, null, $page);
		$max_page = $data['page'];

?>
		
		<nav id="page-nav">
			<a href="index.php?module=ajax&act=ajax&case=1&t=load_more_items&page=<?php echo $page; ?><?php 
			if(isset($_GET['ext'])){ 
				echo "&ext=".$_GET['ext']."&sort=".$_GET['sort']; 
				$append = "/".$_GET['ext']."/".$_GET['sort'];
			
			}else{
				$append = '';
			}
			?>">
			</a>

		</nav>
		<div class="loading" id="mainLoading"><div id="loadMoreItems" class="normalLoadBtn"><img width="20" src="public/images/loading.gif" alt="loading" /> Loading </div><div class="clr"></div></div>
		<div id="next-page"></div>



		</div><!-- end .row -->
	</div><!-- end innerMain -->
</div><!-- end wrapMain -->
		
   <script>
   
  $(document).ready(function(){
	  
	 var curWidth; 
	var detector;
	detector = $('#contentIndex');
	curWidth = detector.outerWidth(true);
    curWidth = detector.outerWidth(true);
	newItemWidth = 0;
		
			if(parseInt(curWidth) >1250){
			
			var mw=5;
			$('.item').css('width',240);
			var du=parseInt(curWidth) - 1200;
			var margin=Math.floor(du/10);
		
			
			console.log("1250 :" +curWidth);
			
			}else  
			if(parseInt(curWidth) >950){
				
			
			
			var mw=5;
			var du=parseInt(curWidth) -950;
			var margin=Math.floor(du/5);
			newItemWidth = margin + 180;
			$('.item').css('width',(newItemWidth));
			
			console.log('Width :' +(margin+180));
			console.log("950 :" +curWidth);
			}else
			if(parseInt(curWidth) >800){
				
			var mw=4;
			var du=parseInt(curWidth) -800;
			var margin=Math.floor(du/4);
			newItemWidth = margin + 190;
			$('.item').css('width',(newItemWidth));
			
			console.log('Width :' +(margin+190));
			console.log("900 :" +curWidth);
			}else
			if(parseInt(curWidth) >600){
				
			var mw=4;
			
			var du=parseInt(curWidth) -600;
			var margin=Math.floor(du/4);
			newItemWidth = margin + 140;
			$('.item').css('width',(newItemWidth));
			console.log('Width :' +(margin+140));
			console.log("600 :" +curWidth);
			
			}else
			if(parseInt(curWidth) >450){
			
			var mw=3;
			
			var du=parseInt(curWidth) -450;
			var margin=Math.floor(du/3);
			newItemWidth = margin + 140;
			$('.item').css('width',(newItemWidth));
			console.log('Width :' +(margin+140));
			console.log("450 :" +curWidth);
			
			}else
			if(parseInt(curWidth) >300){
			
			var mw=2;
				
			var du=parseInt(curWidth) -300;
			var margin=Math.floor(du/2);
			newItemWidth = margin + 140;
			$('.item').css('width',(newItemWidth));
			
			console.log('Width :' +(margin+140));
			console.log("300 :" +curWidth);
			
			
			}else
			if(parseInt(curWidth) >250){
				
			var mw=1;
			newItemWidth = 240;
			$('.item').css('width',newItemWidth);
			console.log('Width : 240');
			console.log("250 :" +curWidth);
			
			}
			if(parseInt(curWidth) <250){
				
			var mw=1;
			var du=parseInt(curWidth) -150;
			var margin=du;
			newItemWidth = margin+140;
			$('.item').css('width',(newItemWidth));
			
			console.log('Width :' +(margin+140));
			console.log("150 :" +curWidth);
			
			
			
			}

    var max_page = '<?= $max_page ?>';
    var $container = $('#contentIndex');
      $container.imagesLoaded(function(){
    	 
      $container.masonry({
        itemSelector: '.item',
        columnWidth:mw,
		isFitWidth: true
      });
     
    });
    var nextSelector = '#page-nav a';
    var origNextUrl = $(nextSelector).attr('href');

    var pageRegex = /(page=)([0-9]+)/;
    var page  = origNextUrl.match(pageRegex)[2];
    var mypage = page;

    var loadedTime = 0;
    
    $container.infinitescroll({
	    navSelector  : '#page-nav',    // selector for the paged navigation 
	    nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
	    itemSelector : '.item',     // selector for all items you'll retrieve
	        
	    path: function(pageNum) {
		    
		    $('#mainLoading').show();

			if(parseInt(mypage) >= parseInt(max_page)){
				
				$('#mainLoading').hide();
				$('#next-page').append('<div class="normalLoadBtn">Hết dữ liệu</div>');
				return;
			}

			
		    
	        if(loadedTime >= 0 && ((mypage + 1) % <?= LOAD_TIME ?> == 0) && mypage >= 1 ){
		    	newPage = mypage + 1;
		        $('#mainLoading').hide();
		        $('#next-page').append('<div class="normalLoadBtn"><a href="' + '<?php echo url_ajax(); ?>' + newPage+ '">Xem tiếp <i class=" icon-long-arrow-right"></i></a></div>');
	        }
	       
	        mypage++;
	        loadedTime++;
	        
	        return origNextUrl.replace( pageRegex, ("$1" + (mypage)));
        }
    },
      
      
      
      // trigger Masonry as a callback
      function( newElements ) {
        console.log('width duoi:' + newItemWidth);
		$.each(newElements, function(e, index){
			//$(index).find(');
			attrHref = $(index).find('.hoverUnderline').attr('href');
			$(index).find('.hoverUnderline').attr('href', attrHref + '&pagerel=' + mypage);
			//alert(attrHref);
		});
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $('.video_play_icon').center();
          $container.masonry( 'appended', $newElems, true ); 
          $container.masonry();
		  //$('.item').css('width', newItemWidth);
          $('#mainLoading').hide();
		  
        });
      }
    );
	
	// Auto resize
	
  $(window).resize(function(){
    if(detector.outerWidth(true)!=curWidth){
        curWidth = detector.outerWidth(true);
		console.log(curWidth);
		
			if(parseInt(curWidth) >1250){
			
			var mw=5;
			$('.item').css('width',240);
			var du=parseInt(curWidth) -1200;
			var margin=Math.floor(du/10);
			console.log('lon hon 1250 - Margin'+ margin)
		//	$('.item').css('margin',"'"+margin+"px'"));
			
			}else  
			if(parseInt(curWidth) >950){
				
			$('.item').css('width',180);	
			console.log('lon hon 950');
			var mw=5;
			var du=parseInt(curWidth) -950;
			var margin=Math.floor(du/5);
			console.log('Width'+(margin+180));
			$('.item').css('width',(margin+180));
				
			
			
			}else
			if(parseInt(curWidth) >800){
				
			var mw=4;
			$('.item').css('width',190);
			var du=parseInt(curWidth) -800;
			console.log('Du '+du);
			var margin=Math.floor(du/4);
			console.log('Margin'+margin);
			$('.item').css('width',(margin+190));
			console.log('lon hon 800');
			
			}else
			if(parseInt(curWidth) >600){
				
			var mw=4;
			$('.item').css('width',140);
			var du=parseInt(curWidth) -600;
			console.log('Du '+du);
			var margin=Math.floor(du/4);
			console.log('Margin'+margin);
			$('.item').css('width',(margin+140));
			
			}else
			if(parseInt(curWidth) >450){
			
			var mw=3;
			$('.item').css('width',140);
			var du=parseInt(curWidth) -450;
			var margin=Math.floor(du/3);
			$('.item').css('width',(margin+140));
			
			}else
			if(parseInt(curWidth) >300){
			
			var mw=2;
			$('.item').css('width',140);
		
			var du=parseInt(curWidth) -300;
			var margin=Math.floor(du/2);
			$('.item').css('width',(margin+140));
			
			
			}else
			if(parseInt(curWidth) >245){
				
			var mw=1;
			$('.item').css('width',240);
			
			}
		
		
		
		
		
        $container.masonry( 'option', { columnWidth:mw });
    }
	});
	// End of auto reisze
    
  });
  
  	
</script>     
<!-- end #wrapMain -->	